<template>
  <div class="kjk">
    <a-flex class="fh">
      <img src="@/assets/41.png" class="img24" @click="handleAvatarClick" />
    </a-flex>
    <div class="content">
      <van-image
        round
        class="img62"
        @click="handleClick(1)"
        :src="userInfo?.memberPicture ? userInfo?.memberPicture : tx"
      />
      <div class="wdtx">我的头像</div>
    </div>
    <div class="item mt46" @click="handleClick(2)">
      <a-typography-text id="nickname-label">昵称</a-typography-text>
      <a-flex class="nickight">
        <a-typography-text id="nickname-value">{{
          userInfo?.memberName
        }}</a-typography-text>
        <van-icon name="arrow" class="arrow" />
      </a-flex>
    </div>

    <div class="item">
      <a-typography-text id="phone-label">手机号码</a-typography-text>
      <a-typography-text id="phone-value">{{
        userInfo?.phonenumber
      }}</a-typography-text>
    </div>

    <div class="item" @click="handleClick(3)">
      <a-typography-text id="birthday-label">生日</a-typography-text>
      <a-flex class="nickight">
        <a-typography-text id="birthday-value">{{
          userInfo?.memberBirthday
        }}</a-typography-text>
        <van-icon name="arrow" class="arrow" />
      </a-flex>
    </div>

    <div class="item" @click="handleClick(4)">
      <a-typography-text id="gender-label">性别</a-typography-text>
      <a-flex class="nickight">
        <a-typography-text id="gender-value">{{
          userInfo?.memberSex == 0
            ? '男'
            : userInfo?.memberSex == 1
            ? '女'
            : '未知'
        }}</a-typography-text>
        <van-icon name="arrow" class="arrow" />
      </a-flex>
    </div>
    <van-popup v-model:show="show" position="bottom" class="popup">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="show = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model:show="showSex" position="bottom" class="popup">
      <van-picker
        :columns="columnsSex"
        @confirm="onConfirmSex"
        @cancel="showSex = false"
      />
    </van-popup>
  </div>
</template>
    
<script setup >
import { isWeChatBrowser, formatDate } from '@/utils/util'
import { useAppStore } from '@/store'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { getSystemMemberInfo, putSystemMember } from '@/api/api'
import tx from '@/assets/129.png'
const router = useRouter()
const currentDate = ref(new Date(2020, 0, 1))
const fileInputRef = ref(null)
const show = ref(false)
const showSex = ref(false)
const userInfo = ref({})
const appStore = useAppStore()
const columnsSex = ['男', '女', '未知']
const minDate = new Date(1950, 0, 1)
const maxDate = new Date(2025, 0, 1)
const onConfirmSex = async (value, index) => {
  console.log('value: ', value, index)
  showSex.value = false
  const res = await putSystemMember({
    id: userInfo.value.id,
    memberSex: index,
  })
  if (res.code == 200) {
    getUserInfo()
  } else {
    Toast.fail(res.msg)
  }
}
const onConfirm = async () => {
  show.value = false
  const res = await putSystemMember({
    id: userInfo.value.id,
    memberBirthday: formatDate(currentDate.value),
  })
  if (res.code == 200) {
    getUserInfo()
  } else {
    Toast.fail(res.msg)
  }
}
const handleAvatarClick = () => {
  router.push({ path: '/my' })
}
onBeforeMount(async () => {
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  getUserInfo()
})
const getUserInfo = async () => {
  const res = await getSystemMemberInfo(userInfo.value.id)
  if (res.code == 200) {
    userInfo.value = res.data
    localStorage.setItem('userInfo', JSON.stringify(res.data))
  } else {
    Toast.fail(res.msg)
  }
}
const handleClick = (index) => {
  switch (index) {
    case 1:
      router.push({ path: '/profile', query: { id: userInfo.value.id } })
      break
    case 2:
      router.push({
        path: '/nickName',
        query: {
          id: userInfo.value.id,
          memberName: userInfo.value.memberName,
        },
      })
      break
    case 3:
      show.value = true
      currentDate.value = new Date(userInfo.value.memberBirthday)
      break
    case 4:
      // router.push({
      //   path: '/gender',
      //   query: {
      //     id: userInfo.value.id,
      //     gender: userInfo.value.memberSex,
      //   },
      // })
      showSex.value = true
      break
  }
}
</script>
<style scoped lang='less'>
.kjk {
  .fh {
    margin: 20px 10px;
  }
  .img62 {
    margin: 16px auto 0;
    display: block;
  }
  .wdtx {
    font-size: 16px;
    text-align: center;
    margin-top: 11px;
  }
  .mt46 {
    margin-top: 46px;
  }
  .header {
    text-align: center;
    margin: 0;
    padding: 10px;
    border-bottom: 1px solid #ccc;

    .left-s-line {
      width: 20px;
      position: absolute;
      left: 10px;
      top: 15px;
    }
  }
  .item {
    height: 50px;
    padding: 16px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .rightLine {
      width: 20px;
    }

    .nickight {
      align-items: center;
      .tx {
        width: 40px;
        height: 40px;
      }
    }
    .arrow {
      font-size: 16px;
      // margin-top: 10px;
    }
  }
}
</style>